<template>
    <div class="click-event space-full">
        <div class="explain">说明：外层为父元素，内层为子元素，点击子元素触发父元素点击事件，具体触发顺序看控制台</div>
        <div class="explain">父组件点击事件：展示区文字变蓝</div>
        <div class="explain">子组件点击事件：展示区文字变绿，子组件添加了阻止事件冒泡功能，所以点击不会触发父组件点击效果</div>
        <div class="out-click" @click="parentClick">
            <div class="inside-click" @click="childClick"></div>
        </div>
        <div class="result-show">我用于展示效果</div>
    </div>
</template>
<script>
export default {
  name: 'EventDelivery',
  methods: {
    parentClick () {
      const ele = document.querySelector('.result-show')
      ele.style.color = 'blue'
      ele.style.fontSize = '40px'
    },
    childClick (evt) {
      evt.stopPropagation() // 使用stopPropagation阻止了事件冒泡
      const ele = document.querySelector('.result-show')
      ele.style.color = 'green'
      ele.style.fontSize = '20px'
    }
  }
}
</script>
<style lang="less" scoped>
.explain{
    font-size: 20px;
    font-weight: bolder;
    margin-bottom: 20px;
}
.out-click{
    width: 30%;
    height: 30%;
    position: relative;
    background: linear-gradient(to right bottom, rgba(20, 209, 237, 1),rgba(13, 234, 54, 1)) no-repeat center;
    opacity: 0.5;
    transition: 300ms;
    cursor: pointer;
    .inside-click{
        width: 50%;
        height: 50%;
        border: 4px dotted rgb(78, 61, 230);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        background: url('../../../asset/svg/cow.svg') no-repeat center;
        background-size: contain;
        transition: 1s;
    }
}
.out-click:hover{
    opacity: 1;
}
.inside-click:hover{
    background-image: url('../../../asset/svg/rabbit.svg');
}
.result-show{
    margin-top: 20px;
    width: 30%;
    height: 30%;
    position: relative;
    border: 5px dashed rgb(20, 22, 21);
    box-sizing: border-box;
    font-size: 20px;
    font-weight: bolder;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
